<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <title>Cascading Solar System</title>
    <style type="text/css">
      body{
        background: url("https://cssanimation.rocks/starwars/images/bg.jpg") no-repeat;
        background-color: #012;
        background-size: 33%;
        min-height: 2050px;
      }
      .system{
        position: relative;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        transform: scale(0.75);
      }
      /* 水星运动轨迹 */
      @-webkit-keyframes rot-mer{
        from {
          -webkit-transform: rotate(0deg) translateY(-84px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-84px) rotate(-360deg);
        }
      }
      @keyframes rot-mer{
        from {
          transform: rotate(0deg) translateY(-84px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-84px) rotate(-360deg);
        }
      }

      /* 金星运动轨迹 */
      @-webkit-keyframes rot-ven{
        from {
          -webkit-transform: rotate(0deg) translateY(-90px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-90px) rotate(-360deg);
        }
      }
      @keyframes rot-ven{
        from {
          transform: rotate(0deg) translateY(-90px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-90px) rotate(-360deg);
        }
      }

      /* 地球运动轨迹 */
      @-webkit-keyframes rot-ear{
        from {
          -webkit-transform: rotate(0deg) translateY(-102px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-102px) rotate(-360deg);
        }
      }
      @keyframes rot-ear{
        from {
          transform: rotate(0deg) translateY(-102px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-102px) rotate(-360deg);
        }
      }
      @-webkit-keyframes rot-lune{
        from {
          -webkit-transform: rotate(0deg) translateY(-7px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-7px) rotate(-360deg);
        }
      }
      @keyframes rot-lune{
        from {
          transform: rotate(0deg) translateY(-7px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-7px) rotate(-360deg);
        }
      }

      /* 火星运动轨迹 */
      @-webkit-keyframes rot-mar{
        from {
          -webkit-transform: rotate(0deg) translateY(-118px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-118px) rotate(-360deg);
        }
      }
      @keyframes rot-mar{
        from {
          transform: rotate(0deg) translateY(-118px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-118px) rotate(-360deg);
        }
      }

      @-webkit-keyframes rot-pho{
        from {
          -webkit-transform: rotate(0deg) translateY(-7px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-7px) rotate(-360deg);
        }
      }
      @keyframes rot-pho{
        from {
          transform: rotate(0deg) translateY(-7px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-7px) rotate(-360deg);
        }
      }

      @-webkit-keyframes rot-dem{
        from {
          -webkit-transform: rotate(0deg) translateY(-9px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-9px) rotate(-360deg);
        }
      }
      @keyframes rot-dem{
        from {
          transform: rotate(0deg) translateY(-9px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-9px) rotate(-360deg);
        }
      }
      
      /* 木星运动轨迹 */
      @-webkit-keyframes rot-jup{
        from {
          -webkit-transform: rotate(0deg) translateY(-228px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-228px) rotate(-360deg);
        }
      }
      @keyframes rot-jup{
        from {
          transform: rotate(0deg) translateY(-228px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-228px) rotate(-360deg);
        }
      }
      @-webkit-keyframes rot-io{
        from {
          -webkit-transform: rotate(0deg) translateY(-39px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-39px) rotate(-360deg);
        }
      }
      @keyframes rot-io{
        from {
          transform: rotate(0deg) translateY(-39px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-39px) rotate(-360deg);
        }
      }
      @-webkit-keyframes rot-eur{
        from {
          -webkit-transform: rotate(0deg) translateY(-41px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-41px) rotate(-360deg);
        }
      }
      @keyframes rot-eur{
        from {
          transform: rotate(0deg) translateY(-41px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-41px) rotate(-360deg);
        }
      }
      @-webkit-keyframes rot-gan{
        from {
          -webkit-transform: rotate(0deg) translateY(-45px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-45px) rotate(-360deg);
        }
      }
      @keyframes rot-gan{
        from {
          transform: rotate(0deg) translateY(-45px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-45px) rotate(-360deg);
        }
      }
      @-webkit-keyframes rot-cal{
        from {
          -webkit-transform: rotate(0deg) translateY(-53px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-53px) rotate(-360deg);
        }
      }
      @keyframes rot-cal{
        from {
          transform: rotate(0deg) translateY(-53px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-53px) rotate(-360deg);
        }
      }

      /* 土星运动轨迹 */
      @-webkit-keyframes rot-sat{
        from {
          -webkit-transform: rotate(0deg) translateY(-362px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-362px) rotate(-360deg);
        }
      }
      @keyframes rot-sat{
        from {
          transform: rotate(0deg) translateY(-362px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-362px) rotate(-360deg);
        }
      }

      /* 天王星运动轨迹 */
      @-webkit-keyframes rot-ura{
        from {
          -webkit-transform: rotate(0deg) translateY(-648px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-648px) rotate(-360deg);
        }
      }
      @keyframes rot-ura{
        from {
          transform: rotate(0deg) translateY(-648px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-648px) rotate(-360deg);
        }
      }

      /* 海王星运动轨迹 */
      @-webkit-keyframes rot-nep{
        from {
          -webkit-transform: rotate(0deg) translateY(-972px) rotate(0deg);
        }
        to{
          -webkit-transform: rotate(360deg) translateY(-972px) rotate(-360deg);
        }
      }
      @keyframes rot-nep{
        from {
          transform: rotate(0deg) translateY(-972px) rotate(0deg);
        }
        to{
          transform: rotate(360deg) translateY(-972px) rotate(-360deg);
        }
      }

      .sun,
      .mer-path,
      .mer,
      .ven-path,
      .ven,
      .ear-path,
      .ear,
      .lune,
      .mar-path,
      .mar,
      .pho,
      .dem,
      .jup-path,
      .jup,
      .sat-path,
      .sat,
      .ura-path,
      .ura,
      .nep-path,
      .nep
      {
        position: absolute;
        left: 50%;
        top: 1066.666666667px;
      }
      .mer-path,
      .ven-path,
      .ear-path,
      .mar-path,
      .jup-path,
      .sat-path,
      .ura-path,
      .nep-path{
        z-index: 100;
        border: 1px solid #444;
        border-radius: 50%;
      }

      .mer,
      .ven,
      .ear,
      .mar,
      .jup,
      .sat,
      .ura,
      .nep,
      .lune{
        z-index: 200;
        border-radius: 50%;
      }

      .sun{
        height: 144px;
        width: 144px;
        background-color: #bdbd02;
        border-radius: 50%;
        margin: -72px;
      }
      .mer-path{
        height: 168px;
        width: 168px;
        margin: -84px;
      }
      .mer{
        height: 3.5px;
        width: 3.5px;
        background-color: #888;
        margin: -1.75px;
        -webkit-animation: rot-mer 0.88s infinite linear;
        animation: rot-mer 0.88s infinite linear;
      }
      .ven-path{
        height: 180px;
        width: 180px;
        margin: -90px;
      }
      .ven{
        height: 5.5px;
        width: 5.5px;
        background-color: #f5f9be;
        margin: -2.75px;
        -webkit-animation: rot-ven 2.25s infinite linear;
        animation: rot-ven 2.25s infinite linear;
      }
      .ear-path{
        height: 204px;
        width: 204px;
        margin: -102px;
      }
      .ear{
        height: 7.5px;
        width: 7.5px;
        background-color: #0066ff;
        margin: -3.5px;
        -webkit-animation: rot-ear 3.65s infinite linear;
        animation: rot-ear 3.65s infinite linear;
        
      }
      .lune,
      .pho,
      .dem{
        height: 2px;
        width: 2px;
        top: 50%;
        margin: -1.5px;
        background-color: #fff;
        -webkit-animation: rot-lune 0.27s infinite linear;
        animation: rot-lune 0.27s infinite linear;
      }
      .mar-path{
        height: 236px;
        width: 236px;
        margin: -118px;
      }
      .mar{
        height: 6px;
        width: 6px;
        background-color: #ff1900;
        margin: -3px;
        -webkit-animation: rot-mar 6.87s infinite linear;
        animation: rot-mar 6.87s infinite linear;
      }
      .pho{
        height: 1px;
        width: 1px;
        margin: -1px;
        -webkit-animation: rot-pho 0.15s infinite linear;
        animation: rot-pho 0.15s infinite linear;
      }
      .dem{
        margin: -1px;
        height: 1px;
        width: 1px;
        -webkit-animation: rot-dem 0.2s infinite linear;
        animation: rot-dem 0.2s infinite linear;
      }
      .jup-path{
        height: 456px;
        width: 456px;
        margin: -228px;
      }
      .jup{
        height: 70px;
        width: 70px;
        background-color: #eaad3b;
        margin: -35px;
        -webkit-animation: rot-jup 43.32s infinite linear;
        animation: rot-jup 43.32s infinite linear;
      }
      .jove{
        width: 2px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 35px;
        left: 50%;
      }
      .io {
        -webkit-animation: rot-io 0.2s infinite linear;
        animation: rot-io 0.2s infinite linear;
      }

      .eur {
        -webkit-animation: rot-eur 0.35s infinite linear;
        animation: rot-eur 0.35s infinite linear;
      }

      .gan {
        -webkit-animation: rot-gan 0.7s infinite linear;
        animation: rot-gan 0.7s infinite linear;
      }

      .cal {
        -webkit-animation: rot-cal 1.65s infinite linear;
        animation: rot-cal 1.65s infinite linear;
      }
      .sat-path{
        height: 724px;
        width: 724px;
        margin: -362px;
      }
      .sat{
        height: 58px;
        width: 58px;
        background-color: #d6cd93;
        margin: -29px;
        -webkit-animation: rot-sat 107.59s infinite linear;
        animation: rot-sat 107.59s infinite linear;
      }
      div[class$=-ring] {
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0.7;
        transform: rotatex(45deg);
      }
      .a-ring {
        border: solid 5px #96866f;
        width: 119px;
        height: 119px;
        margin: -64.5px;
      }

      .b-ring {
        border: solid 10px #554c3c;
        width: 104px;
        height: 104px;
        margin: -62px;
      }

      .c-ring {
        border: solid 9px #574f4a;
        width: 95px;
        height: 95px;
        margin: -56.5px;
      }

      .f-ring {
        border: solid 2px #908e8d;
        width: 133px;
        height: 133px;
        margin: -68.5px;
      }

      .e-ring {
        border: solid 7px #908e8d;
        width: 76px;
        height: 76px;
        margin: -45px;
        transform: rotatex(0deg) rotatey(89deg) !important;
      }
      .ura-path{
        height: 1296px;
        width: 1296px;
        margin: -648px;
      }
      .ura{
        height: 26px;
        width: 26px;
        background-color: #bfeef2;
        margin: -13px;
        -webkit-animation: rot-ura 306.87s infinite linear;
        animation: rot-ura 306.87s infinite linear;
      }
      .nep-path{
        height: 1944px;
        width: 1944px;
        margin: -972px;
      }
      .nep{
        height: 24px;
        width: 24px;
        background-color: #363ed7;
        margin: -12px;
        -webkit-animation: rot-nep 601.9s infinite linear;
        animation: rot-nep 601.9s infinite linear;
      }
      .spot {
        position: absolute;
        width: 16px;
        height: 12px;
        border-radius: 8px/6px;
        top: 45px;
        left: 50%;
        background-color: #bc833b;
        box-shadow: 0px 0px 5px #e1dcde;
        border: solid 1px #e1dcde;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        z-index: 300;
      }
      .nep .spot{
        background-color: #29319d;
        border: 0;
        box-shadow: none;
        top: 50%;
        left: 45%;
        width: 10px;
        height: 6px;
        margin: -2px;
        border-radius: 5px/3px;
        border-left: solid 1px #7ed6fe;
      }
    </style>
  </head>
  <body>
    <div class="system">
      <!-- 太阳 -->
      <div class="sun"></div>
      <!-- 水星及轨道 -->
      <div class="mer-path"></div>
      <div class="mer"></div>
      <!-- 金星及轨道 -->
      <div class="ven-path"></div>
      <div class="ven"></div>
      <!-- 地球及轨道 -->
      <div class="ear-path"></div>
      <div class="ear">
        <div class="lune"></div>
      </div>
      <!-- 火星及轨道 -->
      <div class="mar-path"></div>
      <div class="mar">
        <div class="pho"></div>
        <div class="dem"></div>
      </div>
      <!-- 木星及轨道 -->
      <div class="jup-path"></div>
      <div class="jup">
        <div class="spot"></div>
        <div class="jove io"></div>
        <div class="jove eur"></div>
        <div class="jove gan"></div>
        <div class="jove cal"></div>
      </div>
      <!-- 土星及轨道 -->
      <div class="sat-path"></div>
      <div class="sat">
        <div class="f-ring"></div>
        <div class="a-ring"></div>
        <div class="b-ring"></div>
        <div class="c-ring"></div>
      </div>
      <!-- 天王星及轨道 -->
      <div class="ura-path"></div>
      <div class="ura">
        <div class="e-ring"></div>
      </div>
      <!-- 海王星及轨道 -->
      <div class="nep-path"></div>
      <div class="nep">
        <div class="spot"></div>
      </div>
    </div>
  </body>
</html>